<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('分类')" prop="keyReport">
            <el-input v-model="form.keyReport" :placeholder="$t('分类')" show-word-limit :maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('指标Code')" prop="keyCode">
            <el-input v-model="form.keyCode" :placeholder="$t('指标Code')" :disabled="!isEmpty(form.id) && !isEmpty(form.keyCode)" show-word-limit :maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('指标名称')" prop="keyName">
            <el-input v-model="form.keyName" :placeholder="$t('指标名称')" show-word-limit :maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('排序')" prop="sort">
            <el-input-number v-model="form.sort" :controls="false" :placeholder="$t('排序')" show-word-limit maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('数据类型')" prop="keyType">
            <el-radio-group v-model="form.keyType" :placeholder="$t('数据类型')">
              <el-radio label="money">{{ $t('金额') }}</el-radio>
              <el-radio label="ratio">{{ $t('百分比') }}</el-radio>
              <el-radio label="no">{{ $t('无') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!--
        <el-col :span="12">
          <el-form-item :label="$t('计算方式')" prop="calculationRange">
            <span slot="label">
              {{ $t('计算方式') }}
              <el-tooltip placement="top">
                <div slot="content">
                  {{ $t('以月度为例: ') }}
                  <br>
                  <span style="margin-left: 15px">{{ $t('最新值: 默认情况, 取最后一个月份录入的数据') }}</span>
                  <br>
                  <span style="margin-left: 15px">{{ $t('累计值: 当前月及当前月之前所有值的累计') }}</span>
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <el-radio-group v-model="form.calculationRange" :placeholder="$t('计算范围')">
              <el-radio label="latest">{{ $t('最新值') }}</el-radio>
              <el-radio label="accumulated">{{ $t('累计值') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        -->
        <el-col :span="24">
          <el-form-item :label="$t('公式')" prop="indicatorsFormula">
            <el-autocomplete
              v-model="form.indicatorsFormula"
              class="inline-input"
              :placeholder="$t('公式')"
              readonly
              :trigger-on-focus="false"
              @select="selectGS"
            >
              <template slot="append" @click="selectGS">
                <a @click="selectGS">{{ $t('选择公式') }}</a>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <SaveBtn has-permi="deal:indicator" />
    </div>
    <!-- 添加或修改关键指标公式（系统模板）对话框 -->
    <el-dialog v-el-drag-dialog :title="$t('选择公式')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogFormGS" append-to-body>
      <dealIndicatorPredictUla ref="dealIndicatorPredictUla" :type-id="typeId" :formula="formula" />
    </el-dialog>
  </div>
</template>

<script>
import { saveDealIndicatorPredictKey, getDealIndicatorPredictKey, getDealIndicatorKeyByCode } from '@/api/deal/indicator/dealIndicatorPredictKey.js'
import dealIndicatorPredictUla from '@/views/deal/indicator/dealIndicatorPredictUla.vue'
export default {
  components: {
    dealIndicatorPredictUla
  },
  props: {
    typeId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    const checkIndicatorCode = (rule, value, callback) => {
      if (value === undefined || value === '' || value === null) {
        callback(new Error(this.$t('必填信息')))
      } else {
        if (this.form.id) {
          callback()
        } else {
          getDealIndicatorKeyByCode(this.form.keyCode, this.$route.query.companyId, this.form.typeId).then(response => {
            console.log(response)
            if (response.data > 0) {
              callback(new Error(this.$t('当前code已存在!')))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        keyReport: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        keyCode: [{ required: true, validator: checkIndicatorCode, trigger: 'blur' }],
        keyName: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        indicatorsFormula: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }]
      },
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      formula: {}
    }
  },
  created() {
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getDealIndicatorPredictKey(data.id).then(response => {
          this.form = response.data
          this.loading = false
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        businessId: this.$route.query.companyId,
        typeId: this.typeId,
        keyCode: undefined,
        keyName: undefined,
        keyType: undefined,
        calculationRange: 'latest',
        keyReport: undefined,
        indicatorsFormula: undefined,
        indicatorsCodeFormula: undefined,
        sort: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveDealIndicatorPredictKey(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    },
    /** 选择公式操作 */
    selectGS() {
      this.formOpen = true
      this.formula = {
        name: this.form.indicatorsFormula,
        code: this.form.indicatorsCodeFormula
      }
      this.$nextTick(() => {
        this.$refs.dealIndicatorPredictUla.loadTypeList()
      })
    },
    addFormula(name, code) {
      this.form.indicatorsFormula = name
      this.form.indicatorsCodeFormula = code
    }
  }
}
</script>
<style scoped>

</style>
